<template>
    <el-container class="home_container">
        <!-- 侧边栏 -->
        <el-aside :width="$store.state.isCollapse ? '64px' : '200px'">
            <Aside></Aside>
        </el-aside>
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <header-vue></header-vue>
            </el-header>
            <el-main>
                <!-- 面包屑导航部分 -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{path:'/dashboard'}"><span @click="handleChange">Dashboard</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item class="txtColor">
                        {{this.$store.state.pathName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 内容区域 -->
                <router-view class="section"></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import Aside from '@/components/AsideView.vue'
import HeaderVue from '@/components/HeaderVue.vue'
export default {
  components: {
    Aside,
    HeaderVue
  },
  methods: {
    /* 点击面包屑也能触发侧边栏的激活 */
    handleChange () {
      console.log(this.$store.state.activePath)
      /* 判断跳转的页面是否是当前页面 */
      this.$store.commit('changePathName', '首页')
      this.$store.commit('changeActivePath', '/dashboard')
      window.sessionStorage.setItem('pathName', '首页')
      window.sessionStorage.setItem('activePath', '/dashboard')
      /*  if(this.$route.path === '/dashboard'){
                return this.$message.error('不能重复跳转同一页面')
            } */
      if (this.$route.path === '/dashboard') {
        return this.$message.error('不能重复跳转同一页面')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
    height: 100%;
}

.el-breadcrumb {
    margin-bottom: 1.25rem;
}
.el-main{
  overflow: hidden;
  display: flex;
  flex-direction: column;

}
.section{
  flex: 1;
  height: 100%;
  overflow: scroll;
}
</style>
